<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人网站</title>
    <style>
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        body{background-color: #f7f6f5;}
        ul{list-style: none;}
        /* 版心 */
        .wangye{
            width: 100%;
        }
        /* 头部 开始 */
        .box{
            height: 80px;
        }
        .head{
            width: 100%;
            height: 80px;
            position: fixed;
            background-color: #f14641;
            z-index: 3;
        }
        /* 导航开始 */
        .nav{
            width: 1200px;
            height: 80px;
            margin: 0px auto;
            /* background-color: blue; */
        }

        /* logo  开始 */
        .logo{
            width: 128px;
            height: 80px;
            float: left;
        }
        .logo img{
            width: 106px;
            height: 54px;
            margin-top: 10px;
        }

        /* logo  结束 */

        /* 搜索框 开始 */
        .search_box{
            width: 222px;
            height: 44px;
            line-height:80px;
            float: left;
            margin-top:18px;
            border-radius: 25px;
            position: relative; 
            background-color: #f14641;
        }

         .search{
            width: 222px;
            height: 42px;
            display: block;
            border: none;
            font-size: 17px;
            padding-left: 15px;
            border-radius: 25px;
            
        }
        .search_an{
            width: 70px;
            height: 40px;
            border: none;
            line-height: 40px;
            border-radius: 25px;
            position: absolute;
            left:  153px;
            top: 1px;
            font-weight: bold;
            font-size: 17px;
            color: white;
            margin-left: 12px;
            background-color: #f14641;
            
        }
   
        /* 搜索框结束 */

        /************************* 主导航开始************************** */
        .main_nav{
            width: 670px;
            height: 80px;
            /* background-color: purple; */
            float: left;
            /* font-size: 20px; */
            
        }

        .main_nav .sy,.cpfl .main_nav_a,.msdr,.jjg,.appxz{
            line-height: 80px;
            float: left;
            text-align: center;
            font-weight: bold;
            font-size: 20px;
            color: white;
           
        }
        .sy{
            width: 74px;
            height: 80px;
            margin-left: 63px;
            font-size: 20px;
        }
        .cpfl .main-nav-a{
            width: 126px;
            height: 80px;
            position: relative;
            font-size: 20px;
        }

        .cpfl:hover .hidden_space{
            display: block;
        }
        .cpfl img{
            bottom: 15px;
            margin-left: 5px;
        }
 
        /* 隐藏区域  开始 */
        
        .hidden_space li a{
            color: #999;
        }
        .hidden_space li a:hover{
            display: block;
            text-align: center;
            color: #f64d36;
            border-radius: 20px;
            float: left;
        }
        .hidden_space li :hover{background-color: #fee4e1;}
         h3 a{color: black;}
         h3 a:hover{color: #f64d36;}
         .hidden_space  ul{
            list-style-type: none;
            height: 160px;
        }
        .hidden_space{
            width: 1200px;
            height: 242px;
            margin: 0 auto;
            /* border: 1px solid black; */
            display: none;
            position: absolute;
            top: 80px;
            /* left: 50%;
            margin-left: 600px; */
            background-color: #fff;
            left: 31px;
            border-bottom-left-radius: 25px;
            border-bottom-right-radius: 25px;
        }

          /* 热门标签   开始 */
          .hot_labels h3{
            background-image: url(../../img/jingling.png);
            background-repeat: no-repeat;
            background-size: 20px 150px;
            background-position: 73px   1px;
          }
        .hot_labels{
            width: 365px;
            height: 210px;
            padding-top: 20px;
            padding-left: 20px;
            padding-bottom: 24px;
            /* background-color: pink; */
            float: left;
        }
        .hot_labels_link{
            width: 76px;
            height: 24px;
            float: left;
            margin-top: 15px;
            text-align: left;
            font-size: 14px;
        }
        .hot_labels_sum::after{
            content: '';
            display: block;
            clear: both;
        }
        /* 热门标签 结束 */

        /* 三餐 开始 */
        .three_meals{
            width: 87px;
            height: 198px;
            /* background-color: beige; */
            padding-top: 20px;
            padding-left: 20px;
            padding-bottom: 24px;
            float: left;
        }
        .three_meals h3{
            background-image: url(../../img/jingling.png);
            background-repeat: no-repeat;
            background-size: 21px 151px;
            background-position: 38px   -20px;
          }
        .three_meals_link li{
            width: 76px;
            height: 24px;
            float: left;
            margin-top: 15px;
            text-align: left;
            font-size: 14px;
        }

        /* 三餐 结束 */

        /* 小吃  开始 */
        .snack{
            width: 87px;
            height: 198px;
            /* background-color: green; */
            padding-top: 20px;
            padding-left: 20px;
            padding-bottom: 24px;
            float: left;
        }
        .snack h3{
            background-image: url(../../img/jingling.png);
            background-repeat: no-repeat;
            background-size: 20px 150px;
            background-position: 39px   -41px;
          }
        .snack_link li{
            width: 76px;
            height: 24px;
            float: left;
            margin-top: 15px;
            text-align: left;
            font-size: 14px;
        }
        /* 小吃  结束 */

        /* 外国菜谱 开始 */
        .foreign_recipe{
            width: 173px;
            height: 198px;
            /* background-color: blueviolet; */
            padding-top: 20px;
            padding-left: 20px;
            padding-bottom: 24px;
            float: left;
        }
        .foreign_recipe h3{
            background-image: url(../../img/jingling.png);
            background-repeat: no-repeat;
            background-size: 20px 150px;
            background-position: 75px   -63px;
          }
        .foreign_recipe_link li{
            width: 76px;
            height: 24px;
            float: left;
            margin-top: 15px;
            text-align: left;
            font-size: 14px;
        }
        /* 外国菜谱  结束 */

        /* 人群 开始 */
        .crowd{
            width: 87px;
            height: 166px;
            /* background-color: brown; */
            padding-top: 20px;
            padding-left: 20px;
            padding-bottom: 24px;
            float: left;
        }
        .crowd h3{
            background-image: url(../../img/jingling.png);
            background-repeat: no-repeat;
            background-size: 20px 150px;
            background-position: 38px   -84px;
          }
        .crowd_link li{
            width: 76px;
            height: 24px;
            float: left;
            margin-top: 15px;
            text-align: left;
            font-size: 14px;
        }
        /* 人群  结束 */

        /* 烘培  开始 */
        .baking{
            width: 87px;
            height: 134px;
            /* background-color: burlywood; */
            padding-top: 20px;
            padding-left: 20px;
            padding-bottom: 24px;
            float: left;
        }
        .baking h3{
            background-image: url(../../img/jingling.png);
            background-repeat: no-repeat;
            background-size: 20px 150px;
            background-position: 38px   -105px;
          }
        .baking_link li{
            width: 76px;
            height: 24px;
            float: left;
            margin-top: 15px;
            text-align: left;
            font-size: 14px;
        }
        /* 烘培  结束 */

        /* 中华菜系  开始 */
        .chinese_cuisine{
            width: 173px;
            height: 198px;
            /* background-color: chartreuse; */
            padding-top: 20px;
            padding-left: 20px;
            padding-bottom: 24px;
            float: left;
        }
        .chinese_cuisine h3{
            background-image: url(../../img/jingling.png);
            background-repeat: no-repeat;
            background-size: 20px 150px;
            background-position: 75px   -128px;
          }
        .chinese_cusine_link li{
            width: 76px;
            height: 24px;
            float: left;
            margin-top: 15px;
            text-align: left;
            font-size: 14px;
        }
       
        /* 隐藏区   结束 */
        .msdr{
            width: 108px;
            height: 80px;
            font-size: 20px;
            /* background-color: aquamarine; */
        }
        .jjg{
            width: 91px;
            height: 80px;
            font-size: 20px;
            /* background-color: beige; */
        }
        .appxz{
            width: 145px;
            height: 80px;
            font-size: 20px;
            /* background-color: bisque; */
        }
        .appxz img{
            width: 20px;
            height: 20px;
            margin-right: 4px;
            margin-bottom: -3px;

        }
        .main_nav .sy a,.cpfl .main_nav_a a,.msdr a,.jjg a,.appxz a{
            display: block;
            color: white;
        }
        /* .main_nav .sy a,.cpfl a,.msdr a,.jjg a,.appxz a :hover{
            background-color:#F8635a;

        } */
        /* **********************主导航结束 *****************/


        /* 登录开始 */
        .login{
            line-height: 80px;
            float: right;
        }
        .login a{color: white;}
        .login a:hover{text-decoration: underline;}
        /* 登陆结束 */
        /* 导航结束 */
        /* 头部结束 */

        /**************主体开始*****************  */
        .production_details{
            width:100%;
            background-color: #efeeec;
        }
        /* ***版心**** */
        .production_details_center{
            width: 1200px;
            margin: 0 auto;
            padding: 40px 0 ;
            display: flex;
        }
        /* ***左侧** */
        
        .production_details_center_left img{
          padding-left: 10px;
            width: 350px;
            height: 535px;
        }

        /* ***中间** */
        .production_details_center_middle{
            width: 590px;
            height: 539px;
            /* border: 1px solid #000; */
            padding-left: 30px;
            box-sizing: border-box;
           
        }
        .production_details_center_middle p{
            color: #999;
            font-size: 15px;
            padding: 2px;
        }
        .production_details_center_middle_num div{
            width: 80px;
            height: 160px;
            margin-right: 20px;
            border-radius: 15px;
            background-color: white;
        }
        .production_details_center_middle_num{
            width: 423px;
            height: 160px;
            margin-top: 30px;
            display: flex;
            
        }

        .production_details_center_middle_num .production_details_center_middle_one{
            background: url(../img/production_details_jingling.png) no-repeat 0px 0px ;
            background-size: 80px;
        }
        .production_details_center_middle .production_details_center_middle_two{
            background: url(../img/production_details_jingling.png) no-repeat 0px -159px ;
            background-size: 80px;
        }
        .production_details_center_middle .production_details_center_middle_three{
            background: url(../img/production_details_jingling.png) no-repeat 0px -316px ;
            background-size: 80px;
        }
        .production_details_center_middle .production_details_center_middle_four{
            background: url(../img/production_details_jingling.png) no-repeat 0px -475px ;
            background-size: 80px;
        }
        .production_details_center_middle_num span{
            margin-top: 108px;
            margin-left: 15px;
            color: #999;
            font-size: 12px;
            display: block;
        }
        .production_details_center_middle_num strong{
            margin-left: 17px;
            font-size: 14px;
        }
        .production_details_center_middle_num strong:nth-child(2){
            margin-left: 15px;
        }
        .production_details_center_main_material{
            width: 520px;
            height: 115px;
            margin: 30px 0px 10px 0px; 
            border-radius: 17px;
            display: flex;
        }
        .production_details_center_main_material_left{
            width: 80px;
            height: 100%;
            /* border: 1px solid #000; */
            background-color: #ffe851;
            border-top-left-radius: 17px;
            border-bottom-left-radius: 17px;
        }
        .production_details_center_main_material_left strong{
            font-size: 20px;
            display: block;
            text-align: center;
            padding-top: 10px;
        }
        .production_details_center_main_material_left span{
            margin-left: 23px;
            font-size: 12px;
            font-weight: 600;
        }
         .production_details_center_main_material_right{
           width: 450px;
    
           height: 116px;
           display: flex;
           flex-wrap: wrap;
           background-color: #fff;
           border-top-right-radius: 17px;
           border-bottom-right-radius: 17px;
        } 
        .production_details_center_main_material_right>div{
            /* width: 90px; */
            height: 30px;
            text-align: center;
            background-color: #f5f5f5;
            margin-top: 20px;
            margin-left: 10px;
            line-height: 30px;
            border-radius: 10px;
            font-size: 15px;
            padding: 0 8px;
        }

        .production_details_center_main_material_right .production_details_center_main_material_right_last{
            margin-top: -3px;
        }
        .production_details_center_main_material_right a{
            padding-left: 3px;
            color: #000;
        }
        .production_details_center_main_material_right a:hover{
            color: #f64d68;
            text-decoration: underline;
        }

        .production_details_center_main_material_two{
            width: 520px;
            height: 115px;
            margin-top: 15px; 
            border-radius: 17px;
            display: flex;
        }
        .production_details_center_right{
            width: 260px;
            height: 535px;
            /* border: 1px solid #000; */
            background-color: #fff;
        }
        .production_details_center_right>img{
           display: block;
           margin: 40px auto 20px;
        }
        .production_details_center_right>h3{
            text-align: center;
            font-size: 18px;
            margin-bottom: 5px;
        }
        .production_details_center_right>p{
            text-align: center;
            font-weight: bold;
            font-size: 14px;
        }
        .production_details_center_right>button{
            padding: 10px 53px;
            border: 0;
            font-size: 17px;
            color: white;
            /* font-weight: bold; */
            margin: 40px 35px;
            border-radius: 3px;
            background: url(../img/details_jingling.png) no-repeat #f54d36 27px -17px;
            background-size: 30px;
        }
        .production_details_center_right>button>strong{
            margin-left: 10px;
        }
        
        .production_details_center_right_dian>span{
            width: 5px;
            height: 5px;
            display: inline-flex;
            background-color: #f5f5f5;
            border-radius: 50%;
            user-select: none;
            margin:0 3px;
        }
        .production_details_center_right_bottom{
           padding: 0 30px;
           font-size: 14px;
           margin-top: 30px;
           color: #999;
        }
       
        /********************** 主体结束********************** */


        /***********制作步骤 开始*******************/
        .production_steps_center{
            width: 1200px;
            /* height: 300px; */
            background-color: #f5f5f5;
            margin: 20px auto;
            /* border: 1px solid #000; */
            display: flex;
        }
        .production_steps_left{
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
         
        }
        .production_steps_left_left{
            width: 810px;
            border: 1px solid #000;
      
        }
        .production_steps_left_author_introduction{
            width: 810px;
            height: 176px;
            /* border: 1px solid #000; */
            background-color: white;
            border-radius: 10px;
        }
        .production_steps_left_author_introduction_top{
            width: 762px;
            height: 60px;
            /* border: 1px solid #000; */
            margin: 0 auto;
            margin-top: 24px;
            display: flex;
        }
        .production_steps_left_author_introduction_top>a>img{
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }
        .production_steps_left_author_introduction_top>a>h4{
            padding-left: 10px;
            margin-top: 10px;
            color: black;
        }
        .production_steps_left_author_introduction_top>span{
            margin-top: 33px;
            margin-left: -55px;
            font-size: 14px;
            color: #999;
        }
        .production_steps_left_author_introduction>p{
            
            margin-top: 20px;
            margin-left: 20px;
            color: #666;
        }
        .production_steps_left>.title_l2{
            width: 810px;
            margin-top: 30px;
            margin-bottom: 20px;
        }
        .production_steps_left_one{
            width: 810px;
            height: 527px;
            /* border: 1px solid #000; */
            display: flex;
            flex-wrap: wrap;
            background-color: white;
        }
        .production_steps_left_one_left{
            width: 86px;
            height: 126px;
            background-color: #ffe851;
            margin: 20px 20px 0 ;
            border-radius: 20px;
            border-bottom-right-radius: 0;
        }
        .production_steps_left_one_left>strong{
            display: block;
            margin-left: 14px;
            padding: 14px;
            font-size: 20px;
        }
        .production_steps_left_one_left>span{
            display: block;
            margin-top: -16px;
            margin-left: 40px;
            font-size: 14px;
            font-weight: 600;
        }
        .production_steps_left_one_left>h1{
            margin-top: 10px;
            margin-left: 43px;
            font-size: 2.9rem;
        }
         .production_steps_left_one>img{
            width: 652px;
            height: 434px;
            margin-top: 20px;
            border-radius: 4px;
            
        } 
        .production_steps_left_one>p{
            margin-left: 126px;
            font-size: 18px;
            font-weight: bold;
        }

        /* ********右侧************** */
        .production_steps_right{
            width: 350px;
            margin-left: 36px;
            /* background-color: white; */
            overflow: hidden;
            position: relative;
            background-color: white;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        .production_steps_right_one{
            width: 350px;
            height: 656px;
            /* border: 1px solid #000; */
            background-color: white;
            margin-bottom: 200px;
        }
        .production_steps_right_one>h2{
            margin: 15px 0 15px 15px;
        }
        .production_steps_right_one>div{
            width: 310px;
            height: 50px;
            border: 1px solid rgba(255,186,1,0.2);
            margin: 0px auto 10px ;
            border-radius: 4px;
            display: flex;
            background-image: linear-gradient(to right,#fff,rgba(255,186,1,0.2));
        }
        .production_steps_right_one_img{
            width: 36px;
            height: 36px;
            /* border: 1px solid #000; */
            margin: 5px;
            border-radius: 50%;
            background: url(../img/gxy01.png) no-repeat 6px 6px;
            background-size:25px ;
            background-color: #ffc939;
        }
        .production_steps_right_one>div>h4{
            line-height: 50px;
            margin-left: 5px;
        }
        .production_steps_right_one>div>p{
          margin-left: 80px;
            background: url(../img/gantanhao.png) no-repeat 5px 17px;
            background-size: 16px;
            line-height: 50px;
            font-size: 14px;
            padding-left: 30px;
            font-weight: bold;
            color: #ffba01;
        }
        .production_steps_right_one>div>.p_three{margin-left: 95px;}
        .production_steps_right_one>div>.p_five{margin-left: 127px;}
        .production_steps_right_one>p{
            width: 310px;
            padding: 0 20px;
            font-weight: bold;
            font-size: 18px;
            margin-top: 15px;
        }
        .production_steps_right_one>p>span{
            color: #999;
            font-size: 12px;
        }
        .production_steps_right_one>img{
            display: block;
            width: 310px;
            height: 160px;
            margin: 10px auto 0;
        }
        .production_steps_right_one>.ziduan_one{
            font-size: 13px;
            font-weight: 400;
            color: #666;
            
        }
        /* *********动画   图片***************** */

        .title_two_three{
           width: 350px;
           height: 634px;
           background-color: green;
           /* float: right; */
       }
       .title_two_three img{
            width: 350px;
            height: 634px;
            position: relative;
          
        }
        .production_steps_right .title_two_three_two {
    width: 294px;
    height: 324px;
    /* position: absolute; */
    display: block;
    right: -404px;
    transform: rotate(54deg);
    top: -335px;
    animation: move 4s infinite cubic-bezier(0,0.65,0,0.68);
}


/* 动画  */
@keyframes move{
    0%{right: -400px;transform: rotate(45deg);}
    44%{right: -500px;transform: rotate(90deg);}
    50%{right: -56px; transform: rotate(0);}
    94%{right: -56px; transform: rotate(0);}
    100%{right: -400px; transform: rotate(45deg); display: block;}
}

.production_steps_right_three{
    position:fixed;
    top: 150px;
 
    background-color: white;
    border-radius: 10px;
    
}
 .production_steps_right_three_box{
    width: 350px;
    background-color: white;
    /* border: 1px solid #000; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.production_steps_right_three>h2{
    padding: 20px 0 20px 20px;
}
.production_steps_right_three_box>a{
    width: 142px;
    height: 173px;
}
.production_steps_right_three_box>a>img{
    width: 142px;
    height: 142px;
    border-radius: 6px;
}
.production_steps_right_three_box>a>strong{
    color: black;
    font-size: 13px;
    padding: 10px 0;
}


        /* ********制作步骤 结束*************** */
        /* 底部   开始 */
        .main_footer{
            height: 350px;
            background-color: black;
            margin-top: 90px;
        }
        .main_footer_center{
            width: 1200px;
            height: 350px;
            margin:0 auto;
            /* margin-bottom: -30px; */
            /* background-color: red; */
        }
        .footer_top{
            width: 1200px;
            height: 190px;
            /* background-color: yellow; */
            
        }
       .footer_logo{
        width: 600px;
        height: 190px;
        /* background-color: green; */
        float: left;
        margin-top: 40px;
       }
       .footer_logo a{
        width: 200px;
        height: 180px;
        margin-top: 10px;
       }
       .footer_logo img{
        width: 200px;
        height: 140px;
       }
       .sub_logo img{
        height: 130px;
       }
       .footer_top_right{
        width: 600px;
        height: 200px;
        /* background-color: pink; */
        float: right;
        margin-top: 30px;
       }
        .footer_top_right_one{
            width: 280px;
            height: 80px;
            background-color: #4e4e4d;
            margin-left: 20px;
            margin-bottom: 20px;
            border-radius: 4px;
            float: left;
        }
        .footer_top_right_one_img{
            width: 50px;
            height: 50px;
            margin-top: 13px;
            margin-left: 40px;
            /* margin-right: 15px; */
            float: left;
        }
        .footer_top_right_one_img>img{
            width: 50px;
            height: 50px;
        }
        .app_one{
            width: 280px;
            height: 64px;
            padding-top: 15px;
        }
        .app_one:hover{
            background-color: gray;
        }
       .footer_top_right_one_one{
        width: 180px;
        height: 26px;
        display: block;
        float: left;
        padding-left: 10px;
        color: white;
        
       }
       .footer_top_right_one_two{
        width: 180px;
        height: 22px;
        display: block;
        padding-left: 10px;
        float: right;
        font-size: 13px;
        color: rgba(255,255,255,0.5);
       }
        .footer_top_right_two{
            width: 280px;
            height: 80px;
            background-color: #4e4e4d;
            margin-left: 20px;
            border-radius: 4px;
            float: left;
        }

        .footer_top_right_two_img{
            width: 50px;
            height: 50px;
            margin-top: 13px;
            margin-left: 40px;
            /* margin-right: 15px; */
            float: left;
        }
        .footer_top_right_two_img>img{
            width: 50px;
            height: 50px;
        }
        .app_two{
            width: 280px;
            height: 64px;
            padding-top: 15px;
        }
        .app_two:hover{
            background-color: gray;
        }
       .footer_top_right_two_one{
        width: 180px;
        height: 26px;
        display: block;
        float: left;
        padding-left: 10px;
        color: white;
        
       }
       .footer_top_right_two_two{
        width: 180px;
        height: 22px;
        display: block;
        padding-left: 10px;
        float: right;
        font-size: 13px;
        color: rgba(255,255,255,0.5);
       }
        .footer_top_right_three{
            width: 280px;
            height: 80px;
            background-color: #4e4e4d;
            margin-left: 20px;
            float: right;
            border-radius: 4px;
            margin-top: 20px;
        }
        .footer_top_right_three_img{
            width: 50px;
            height: 50px;
            margin-top: 13px;
            margin-left: 40px;
            /* margin-right: 15px; */
            float: left;
        }
        .footer_top_right_three_img>img{
            width: 50px;
            height: 50px;
        }
        .app_three{
            width: 280px;
            height: 64px;
            padding-top: 15px;
        }
        .app_three:hover{
            background-color: gray;
        }
       .footer_top_right_three_one{
        width: 180px;
        height: 26px;
        display: block;
        float: left;
        padding-left: 10px;
        color: white;
        
       }
       .footer_top_right_three_two{
        width: 180px;
        height: 22px;
        display: block;
        padding-left: 10px;
        float: right;
        font-size: 13px;
        color: rgba(255,255,255,0.5);
       }
        .footer_top_right_four{
            width: 280px;
            height: 80px;
            background-color: #4e4e4d;
            margin-left: 20px;
            border-radius: 4px;
            float: right;
        }
        .footer_top_right_four_img{
            width: 50px;
            height: 50px;
            margin-top: 13px;
            margin-left: 40px;
            /* margin-right: 15px; */
            float: left;
        }
        .footer_top_right_four_img>img{
            width: 50px;
            height: 50px;
        }
        .app_four{
            width: 280px;
            height: 64px;
            padding-top: 15px;
        }
        .app_four:hover{
            background-color: gray;
        }
       .footer_top_right_four_one{
        width: 180px;
        height: 26px;
        display: block;
        float: left;
        padding-left: 10px;
        color: white;
        
       }
       .footer_top_right_four_two{
        width: 180px;
        height: 22px;
        display: block;
        padding-left: 10px;
        float: right;
        font-size: 13px;
        color: rgba(255,255,255,0.5);
       }

        .footer_nav{
            width: 1200px;
            height: 120px;
            /* margin-top: 10px; */
            /* background-color: purple; */
        }
        .ulone{
            width: 1200px;
            height: 53px;
            text-align: center;
        }
        .ulone a{
            color: white;
            font-weight: bold;
        }
        .ulone a:hover{
            color: red;
        }
        .footer_nav li{
            display: inline-block;
            margin-top: 30px;
            padding: 0 10px;
        }
        .beiwen{
            width: 1200px;
            height: 34px;
            padding-top: 45px;
            color: gray;
            text-align: center;
            font-size: 13px;
        }
        /* 底部    结束 */
    
    </style>
</head>
<body>
    <!-- 版心 -->
    <div class="wangye">
        <!--------------------- 头部开始 ------------------------->
        <div class="box">
        <header class="head">
        
            <!-- 导航开始 -->
            <div class="nav">
                <!-- logo  开始 -->
                <div class="logo">
                    <a href="#"><img src="logo.png"></a>
                </div>
                <!-- logo 结束 -->

                <!-- 搜索框开始 -->
                <div class="search_box">
                    <form action="#" method="get">
                        <!--   autocomplete=off  ————>清楚input框的历史记录 -->
                      <input  class="search" type="text" name="a" placeholder="菜谱名、食材名" autocomplete="off" maxlength="8">
                        <input  class="search_an" type="submit" value="搜索">
                    </form>
                </div>
                <!-- 搜索框结束 -->

                <!-- 主导航 开始 -->
                <div class="main_nav">
                    <div class="sy"><a href="#">首页</a></div>
                    <div class="cpfl"><a href="#" class="main_nav_a">菜谱分类<img src="../img/02.png"></a>
                    
   
                        <div class="hidden_space">
                            
                            <!-- 热门标签  开始 -->
                            <div class="hot_labels">
                               <h3><a href="#">热门标签</a></h3>
                                <ul class="hot_labels_sum">
                                    <li class="hot_labels_link"><a href="#">视频菜谱</a></li>
                                    <li class="hot_labels_link"><a href="#">家常菜</a></li>
                                    <li class="hot_labels_link"><a href="#">下饭菜</a></li>
                                    <li class="hot_labels_link"><a href="#">凉菜</a></li>
                                    <li class="hot_labels_link"><a href="#">海鲜</a></li>
                                    <li class="hot_labels_link"><a href="#">热菜</a></li>
                                    <li class="hot_labels_link"><a href="#">汤粥</a></li>
                                    <li class="hot_labels_link"><a href="#">素食</a></li>
                                    <li class="hot_labels_link"><a href="#">酱料蘸料</a></li>
                                    <li class="hot_labels_link"><a href="#">微波炉</a></li>
                                    <li class="hot_labels_link"><a href="#">火锅底料</a></li>
                                    <li class="hot_labels_link"><a href="#">方便面</a></li>
                                    <li class="hot_labels_link"><a href="#">糕点主食</a></li>
                                    <li class="hot_labels_link"><a href="#">干果</a></li>
                                    <li class="hot_labels_link"><a href="#">卤味</a></li>
                                    <li class="hot_labels_link"><a href="#">饮品</a></li>
                                </ul>
                            </div>
                            <!-- 热门标签   结束 -->
                    
                            <!-- 三餐   开始 -->
                            <div class="three_meals">
                                <h3><a href="#">三餐</a></h3>
                                <ul class="three_meals_link">
                                    <li><a href="#">早餐</a></li>
                                    <li><a href="#">午餐</a></li>
                                    <li><a href="#">晚餐</a></li>
                                    <li><a href="#">下午茶</a></li>
                                    <li><a href="#">夜宵</a></li>
                                </ul>
                            </div>
                            <!-- 三餐结束 -->
                    
                            <!-- 小吃  开始 -->
                            <div class="snack">
                                <h3><a href="#">小吃</a></h3>
                                <ul class="snack_link">
                                    <li><a href="#">四川小吃</a></li>
                                    <li><a href="#">广东小吃</a></li>
                                    <li><a href="#">北京小吃</a></li>
                                    <li><a href="#">陕西小吃</a></li>
                                    <li><a href="#">山东小吃</a></li>
                                </ul>
                            </div>
                            <!-- 小吃  结束 -->
                    
                            <!-- 外国菜谱 开始 -->
                                <div class="foreign_recipe">
                                    <h3><a href="#">外国菜谱</a></h3>
                                    <ul class="foreign_recipe_link">
                                        <li><a href="#">法国菜</a></li>
                                        <li><a href="#">西餐面点</a></li>
                                        <li><a href="#">餐前小吃</a></li>
                                        <li><a href="#">主菜</a></li>
                                        <li><a href="#">甜点</a></li>
                                        <li><a href="#">日本料理</a></li>
                                        <li><a href="#">韩国料理</a></li>
                                        <li><a href="#">主食</a></li>
                                        <li><a href="#">饮品</a></li>
                                    </ul>
                                </div>
                            <!-- 外国菜谱 结束 -->
                    
                            <!-- 人群   开始 -->
                                <div class="crowd">
                                    <h3><a href="#">人群</a></h3>
                                    <ul class="crowd_link">
                                        <li><a href="#">孕妇</a></li>
                                        <li><a href="#">产妇</a></li>
                                        <li><a href="#">幼儿辅食</a></li>
                                        <li><a href="#">老年人</a></li>
                                    </ul>
                                </div>
                            <!-- 人群 结束 -->
                    
                            <!-- 烘培   开始 -->
                                <div class="baking">
                                    <h3><a href="#">烘培</a></h3>
                                    <ul class="baking_link">
                                        <li><a href="#">蛋糕面包</a></li>
                                        <li><a href="#">饼干配方</a></li>
                                        <li><a href="#">甜品点心</a></li>
                                    </ul>
                                </div>
                            <!-- 烘培  结束 -->
                    
                            <!-- 中华菜系   开始-->
                            <div class="chinese_cuisine">
                                <h3><a href="#">中华菜系</a></h3>
                                <ul class="chinese_cusine_link">
                                    <li><a href="#">川菜</a></li>
                                    <li><a href="#">湘菜</a></li>
                                    <li><a href="#">粤菜</a></li>
                                    <li><a href="#">京菜</a></li>
                                    <li><a href="#">东北菜</a></li>
                                    <li><a href="#">鲁菜</a></li>
                                    <li><a href="#">浙菜</a></li>
                                </ul>
                            </div>
                            <!-- 中华菜系    结束 -->
                    </div>
                </div>
                        <!-- 隐藏去 结束 -->
   <div class="msdr"><a href="msj_msdr.html" target="_blank">美食达人</a></div>
                    <div class="jjg"><a href="#">家居馆</a></div>
                    <div class="appxz"><a href="#"><img src="../img/01.png"> APP下载</a></div>
                    </div>
                 
                          <!-- 隐藏区  开始 -->
                     
                          <!-- 登录 开始 -->
                <div class="login">
                    <a href="msj_zcdl.html" target="_blank">登录</a>
                   
                </div>
                <!-- 登陆结束 -->
                </div>
                <!-- 主导航结束 -->
                

              
            </div>  
              <!--导航结束-  -->
              <div class="header_2"></div>
        </header>
        </div>
    </div>
        <!----------------------------- 头部结束 ---------------------->


        <!-- -------------------主体开始--------------- -->
        <div class="production_details">
            <!-- -版心-- -->
            <div class="production_details_center">
                <!-- ---左侧--- -->
                <div class="production_details_center_left">
                    <img src="../img/production_details01.png" alt="">
                </div>
                <!----中间--->
                <div class="production_details_center_middle">
                    <h1>青椒炒鸡蛋</h1>
                    <p>by 飘零星 · 42收藏 · 24175浏览</p>
                    <div class="production_details_center_middle_num">
                        <div class="production_details_center_middle_one">
                            <span>工艺</span>
                            <strong>炒</strong>
                        </div>
                        <div class="production_details_center_middle_two">
                            <span>口味</span>
                            <strong>家常味</strong>
                        </div>
                        <div class="production_details_center_middle_three">
                            <span>时间</span>
                            <strong>20分钟</strong>
                        </div>
                        <div class="production_details_center_middle_four">
                            <span>难度</span>
                            <strong>初级入门</strong>
                        </div>
                    </div>
                   <div class="production_details_center_main_material">
                        <div class="production_details_center_main_material_left">
                            <strong>主料</strong>
                            <span>main</span>
                        </div>
                        
                        <div class="production_details_center_main_material_right">
                            <div><a href="#">芹菜</a> 100克</div>
                            <div><a href="#">香干</a> 50克</div>
                            <div><a href="#">胡萝卜</a> 20克</div>
                            <div><a href="#">绿豆芽</a> 15克</div>
                            <div class="production_details_center_main_material_right_last"><a href="#">粉条</a>60克</div>
                        </div>
                   </div>
                   <div class="production_details_center_main_material_two">

                    <div class="production_details_center_main_material_left">
                        <strong>辅料</strong>
                        <span>others</span>
                    </div>
                    
                    <div class="production_details_center_main_material_right">
                        <div><a href="#">姜</a> 3克</div>
                        <div><a href="#">葱</a> 3克</div>
                        <div><a href="#">蒜</a> 3克</div>
                        <div><a href="#">生抽</a> 4克</div>
                        <div ><a href="#">十三香</a> 5克</div>
                        <div class="production_details_center_main_material_right_last"><a href="#">鸡精</a> 3克</div>
                    </div>

                   </div>
                </div>

                <!-- 右侧 -->
                <div class="production_details_center_right">
                    <img src="../img/delete_erweima.png" alt="">
                    <h3>扫描二维码</h3>
                    <p>用手机查看这篇文章</p>
                    <button><strong>收藏 (25)</strong></button>
                    <div class="production_details_center_right_dian">
                        <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                    </div>
                    <div class="production_details_center_right_bottom">
                        <p>创建时间：2018-02-26</p>
                        <p>竹笋炒腊肉的版权归作者所有，没有作者本人的书面许可任何人不得转载或使用其中整体或任何部分内容。</p>
                    </div>
                </div>
            </div>
        </div>

        <!--------------------- 主体结束------------------------- -->


        <!-----------------------制作步骤 开始--------------->
        <div class="production_steps_center">
            <!-- 左侧 -->
            <div class="production_steps_left">
                <div class="production_steps_left_author_introduction">
                    <div class="production_steps_left_author_introduction_top">
                        <a href="#"><img src="../img/touxiang.jpg" alt=""></a>
                        <a href="#"><h4>author</h4></a>
                        <span>1306菜谱 49046粉丝</span>
                    </div>
                    <p>竹笋是大自然给人类的礼物馈赠，竹笋的营养丰富，含膳食纤维高、低热量、是减肥养生的好食材。竹笋能凉拌、炒、煲汤、还能晒干。最喜欢常吃的还是竹笋炒腊肉，让腊肉的香融入到竹笋中，口口嫩香。</p>
                </div>
                <h2 class="title_l2">竹笋炒腊肉的做法</h2>
                <div class="production_steps_left_one">
                    <div class="production_steps_left_one_left">
                        <strong>步骤</strong>
                        <span>step</span>
                        <h1>1</h1>
                    </div>
                    <img src="../img/buzou1.jpg" alt="">
                    
                    <p>新鲜的笋去壳，洗净，准备腊肉；PS：照片中笋不止500克</p>
                   
                </div>

                <!-- ------------------222222222222---------------------- -->
                <div class="production_steps_left_one">
                    <div class="production_steps_left_one_left">
                        <strong>步骤</strong>
                        <span>step</span>
                        <h1>2</h1>
                    </div>
                    <img src="../img/buzhou2.jpg" alt="">
                    
                    <p> 笋切片、腊肉切片；</p>
                   
                </div>
                <!--------------------333333333333333--------------------------------- -->
                <div class="production_steps_left_one">
                    <div class="production_steps_left_one_left">
                        <strong>步骤</strong>
                        <span>step</span>
                        <h1>3</h1>
                    </div>
                    <img src="../img/buzhou3.jpg" alt="">
                    
                    <p>清水煮沸，汆烫笋，捞出过冷水；</p>
                   
                </div>
                <!-- ---------------------444444444444444------------------------------------ -->
                <div class="production_steps_left_one">
                    <div class="production_steps_left_one_left">
                        <strong>步骤</strong>
                        <span>step</span>
                        <h1>4</h1>
                    </div>
                    <img src="../img/buzhou4.jpg" alt="">
                    
                    <p>热锅，倒油，小火煎腊肉至熟，起锅；</p>
                   
                </div>
                <!-- ----------------------------55555555555-------------------------------------------- -->
                <div class="production_steps_left_one">
                    <div class="production_steps_left_one_left">
                        <strong>步骤</strong>
                        <span>step</span>
                        <h1>5</h1>
                    </div>
                    <img src="../img/buzhou5.jpg" alt="">
                    
                    <p>蒜末煸香，倒入笋爆炒至八成熟；</p>
                   
                </div>
                <!-- --------------------------66666666666666666------------------------------ -->
                <div class="production_steps_left_one">
                    <div class="production_steps_left_one_left">
                        <strong>步骤</strong>
                        <span>step</span>
                        <h1>6</h1>
                    </div>
                    <img src="../img/buzhou6.jpg" alt="">
                    
                    <p>放入切好的辣椒、煎好的腊肉；</p>
                   
                </div>
                <!-- -----------------------777777777777----------------------- -->
                <div class="production_steps_left_one">
                    <div class="production_steps_left_one_left">
                        <strong>步骤</strong>
                        <span>step</span>
                        <h1>7</h1>
                    </div>
                    <img src="../img/buzhou7.jpg" alt="">
                    
                    <p>放酱油、盐炒均即可。</p>
                   
                </div>
                <!-- -------------------------88888888888888888-------------------------- -->
                <div class="production_steps_left_one">
                    <div class="production_steps_left_one_left">
                        <strong>步骤</strong>
                        <span>step</span>
                        <h1>8</h1>
                    </div>
                    <img src="../img/buzhou8.jpg" alt="">
                    
                    <p>香辣可口，美味出锅</p>
                   
                </div>
            </div>

            <!-- 右侧 -->
            <div class="production_steps_right">
                <div class="production_steps_right_one">
                    <h2>这道菜适合我吃么？</h2>
                    <div>
                        <div class="production_steps_right_one_img"></div>
                        <h4>高血压人群</h4>
                        <p>控制少吃</p>
                    </div>
                    <div>
                        <div class="production_steps_right_one_img"></div>
                        <h4>高血压人群</h4>
                        <p>建议多吃</p>
                    </div>
                    <div>
                        <div class="production_steps_right_one_img"></div>
                        <h4>减肥人群</h4>
                        <p class="p_three">控制少吃</p>
                    </div>
                    <div>
                        <div class="production_steps_right_one_img"></div>
                        <h4>高血糖人群</h4>
                        <p>建议多吃</p>
                    </div>
                    <div>
                        <div class="production_steps_right_one_img"></div>
                        <h4>儿童</h4>
                        <p class="p_five">控制少吃</p>
                    </div>
                    
                    <p>菜谱营养分析 <span>(根据所含全部食材计算)</span></p>
                    <img src="../img/jinzita.png" alt="">
                    <p class="ziduan_one">·含盐或脂肪较少，有高血压的朋友可放心吃</p>
                    <p class="ziduan_one">·吃太多不容易消化，尽量让孩子少吃</p>
                   
                
                </div>
                <div class="title_two_three">
                    <img src="../img/06.png" alt="二维码">
                    <img src="../img/donghua.png" class="title_two_three_two" >
                </div>
                <div class="production_steps_right_three">
                    <h2>猜你喜欢</h2>
                    <div class="production_steps_right_three_box">

                        <a href="#">
                            <img src="../img/xihuan1.jpg" alt="">
                            <strong>炸红薯丸子</strong>
                        </a>
                        <a href="#">
                            <img src="../img/xihuan2.jpg" alt="">
                            <strong>西米红薯糕</strong>
                        </a>
                        <a href="#">
                            <img src="../img/xihuan3.jpg" alt="">
                            <strong>米酒小汤圆</strong>
                        </a>
                        <a href="#">
                            <img src="../img/xihuan4.jpg" alt="">
                            <strong>苹果馅糯米饼</strong>
                        </a>
                    </div>
                 
                </div>
            </div>
         </div>
        <!-------------------- 制作步骤结束------------------- -->
     
   



    <!-- -----------------底部开始------------------------ -->
    <div class="main_footer">
        <div class="main_footer_center">
            <div class="footer_top">
                <div class="footer_logo">
                    <a href="#"><img src="../img/main_footer.png" alt=""></a>
                    <span class="sub_logo"><img src="../img/footer.png"></span>
                </div>
                <div class="footer_top_right">
                    <div class="footer_top_right_one">
                        <div class="footer_top_right_one_img"><img src="../img/032.png"></div>
                        <div class="app_one">
                            <span class="footer_top_right_one_one">美食杰APP</span>
                            <span class="footer_top_right_one_two">扫码免费安装</span>
                        </div>
                    </div>
                    <div class="footer_top_right_two">
                        <div class="footer_top_right_two_img"><img src="../img/032.png"></div>
                        <div class="app_two">
                            <span class="footer_top_right_two_one">美食杰微信小程序</span>
                            <span class="footer_top_right_two_two">微信扫码进入</span>
                        </div>
                    </div>
                    <div class="footer_top_right_three">
                        <div class="footer_top_right_three_img"><img src="../img/weibo.webp"></div>
                        <div class="app_three">
                            <span class="footer_top_right_three_one">美食杰官方微博</span>
                            <span class="footer_top_right_three_two">扫码关注，点击进入</span>
                        </div>
                    </div>
                    <div class="footer_top_right_four">
                        <div class="footer_top_right_four_img"><img src="../img/weixin.webp"></div>
                        <div class="app_four">
                            <span class="footer_top_right_four_one">美食杰微信小程序</span>
                            <span class="footer_top_right_four_two">微信扫码进入</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="footer_nav">
                <ul type="none" class="ulone">
                    <li>
                        <a href="http://www.meishi.cc" target="_blank">公司简介</a>
                    </li>
                    <li>
                        <a href="http://www.meishi.cc" target="_blank">关于我们</a>
                    </li>
                    <li>
                        <a href="http://www.meishi.cc" target="_blank">产品下载</a>
                    </li>
                    <li>
                        <a href="http://www.meishi.cc" target="_blank">加入我们</a>
                    </li>
                    <li>
                        <a href="http://www.meishi.cc" target="_blank">联系我们</a>
                    </li>
                    <li>
                        <a href="http://www.meishi.cc" target="_blank">商务合作</a>
                    </li>
                    <li>
                        <a href="http://www.meishi.cc" target="_blank">用户协议</a>
                    </li>
                    <li>
                        <a href="http://www.meishi.cc" target="_blank">隐私政策</a>
                    </li>
                    <li>
                        <a href="http://www.meishi.cc" target="_blank">网站地图</a>
                    </li>
                    <li>
                        <a href="http://www.meishi.cc" target="_blank">友情链接</a>
                    </li>
                </ul>
                <p class="beiwen">京ICP备14030359号-1/<img src="../img/guohui.png">京公网安备11010802026928 Copyright ? 2003-2021 MEISHI CO.,LTD.</p>
            </div>
        </div>
        
    </div>
    <!------------------------- 底部  结束 -------------------->
</body>
</html>